<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="关键词一，关键词二">
	<meta name="Description" content="网站描述内容">
	<title>Document</title>

	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #272727;
		}

		#qq {
			width: 600px;
			/*宽*/
			height: 170px;
			/*高*/
			background: #fff;
			/*背景颜色*/
			margin: 50px auto 30px;
			border-radius: 5px;
			/*Html5 圆角*/
		}

		#qq p {
			font-size: 14px;
			color: #666;
			line-height: 46px;
			text-indent: 20px;
		}

		#qq .message {
			width: 560px;
			height: 70px;
			margin: 0 auto;
			overflow: hidden;
			outline: none;
			border: 1px solid #ddd;
			padding: 8px;
			box-sizing: border-box;
			font-size: 14px;
			-webkit-background-clip: text;
			background-image: linear-gradient(to right, #778899 0%, #333 100%);
			/*粗细 风格 颜色*/
		}

		#qq .But {
			width: 560px;
			height: 35px;
			margin: 15px auto 0px;
			position: relative;
			/*相对，参考对象*/
		}

		#qq .But img.bq {
			float: left;
			/*左浮动*/
		}

		#qq .But span.submit {
			width: 80px;
			height: 30px;
			background: #ff8140;
			display: block;
			float: right;
			/*右浮动*/
			line-height: 30px;
			border-radius: 5px;
			cursor: pointer;
			/*手指*/
			color: #fff;
			font-size: 12px;
			text-align: center;
			font-family: "微软雅黑";
		}

		/*face begin*/
		#qq .But .face {
			width: 440px;
			background: #fff;
			border: 1px solid #ddd;
			box-shadow: 0 0 12px #666;
			position: absolute;
			/*绝对定位*/
			top: 28px;
			left: 10px;
			display: none;
			/*隐藏*/
		}
		/* #qq .But .face i{
			content: '';
			position: absolute;
			top: -20px;
			left: 10px;
			width: 0;
			height: 0;
			border: 10px solid #ffff;
			border-top-color: transparent;
			border-left-color: transparent;
			border-right-color: transparent;
			z-index: 3;
		} */

		#qq .But .face ul {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 8px;
			box-sizing: border-box;
		}

		#qq .But .face ul li {
			/* width: 30px;
			height: 30px; */
			height: 22px;
			width: 26px;
			list-style-type: none;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: -1px 0 0 -1px;
			border: 1px solid #e8e8e8;
			padding: 6px 4px;
			overflow: hidden;
			cursor: pointer;
		}
		#qq .But .face ul li img{
			width: 22px;
    	height: 22px;
		}

		#qq .But .face ul li:hover{
			border: 1px solid #eb7350;
			background: #fff9ec;
			position: relative;
			z-index: 2;
		}

		/*msgCon begin*/
		.msgCon {
			width: 600px;
			margin: 0px auto;
			margin-bottom: 60px;
		}

		.msgCon .msgBox {
			background: #fff;
			padding: 10px;
			box-sizing: border-box;
			margin-top: 16px;
			border-radius: 4px;
		}

		.msgCon .msgBox .headUrl {
			width: 100%;
			height: 60px;
			border-bottom: 1px dotted #ddd;
			display: flex;
			align-items: center;
		}

		.msgCon .msgBox .headUrl img {
			width: 46px;
			height: 46px;
			border-radius: 50%
		}

		.msgCon .msgBox .headUrl div {
			flex: 1;
			display: flex;
			flex-flow: column;
			font-size: 16px;
			margin-left: 16px;
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
		}

		.msgCon .msgBox .headUrl div .time {
			font-size: 14px;
			margin-top: 6px;
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
		}

		.msgCon .msgBox .headUrl a {
			font-size: 14px;
			padding: 10px;
			color: salmon;
			cursor: pointer;
		}

		.msgCon .msgBox .msgTxt {
			font-size: 14px;
			color: #666;
			min-height: 40px;
			line-height: 24px;
			padding: 10px;
			box-sizing: border-box;
			word-wrap: break-word;
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(to right, #778899 0%, #333 100%);
		}
		.emoji>div{
			padding: 5px 12px 0;
			line-height: 2;
		}
	</style>


</head>

<body>

	<div id="qq">
		<p>有什么新鲜事想告诉大家?</p>
		<div class="message" contentEditable='true'></div>
		<div class="But">
			<img src="images/bba_thumb.gif" class='bq' />
			<span class='submit'>发布</span>
			<!--face begin-->
			<div class="face emoji">
				<div>常用表情</div>
				<i></i>
				<ul class="emoji-cont">
					<li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
					<li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
					<li><img src="images/laugh.gif" title="[哈哈]"></li>
					<li><img src="images/tza_thumb.gif" title="[可爱]"></li>
					<li><img src="images/kl_thumb.gif" title="[可怜]"></li>
					<li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
					<li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
					<li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
					<li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
					<li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
					<li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
					<li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
					<li><img src="images/sada_thumb.gif" title="[泪]"></li>
					<li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
					<li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
					<li><img src="images/sb_thumb.gif" title="[生病]"></li>
					<li><img src="images/mb_thumb.gif" title="[太开心]"></li>
					<li><img src="images/ldln_thumb.gif" title="[懒得理你]"></li>
					<li><img src="images/yhh_thumb.gif" title="[右哼哼]"></li>
					<li><img src="images/zhh_thumb.gif" title="[左哼哼]"></li>
					<li><img src="images/x_thumb.gif" title="[嘘]"></li>
					<li><img src="images/cry.gif" title="[衰]"></li>
					<li><img src="images/wq_thumb.gif" title="[委屈]"></li>
					<li><img src="images/t_thumb.gif" title="[吐]"></li>
					<li><img src="images/k_thumb.gif" title="[打哈气]"></li>
					<li><img src="images/bba_thumb.gif" title="[抱抱]"></li>
					<li><img src="images/angrya_thumb.gif" title="[怒]"></li>
					<li><img src="images/yw_thumb.gif" title="[疑问]"></li>
					<li><img src="images/cza_thumb.gif" title="[馋嘴]"></li>
					<li><img src="images/88_thumb.gif" title="[拜拜]"></li>
					<li><img src="images/sk_thumb.gif" title="[思考]"></li>
					<li><img src="images/sweata_thumb.gif" title="[汗]"></li>
					<li><img src="images/sleepya_thumb.gif" title="[困]"></li>
					<li><img src="images/sleepa_thumb.gif" title="[睡觉]"></li>
					<li><img src="images/money_thumb.gif" title="[钱]"></li>
					<li><img src="images/sw_thumb.gif" title="[失望]"></li>
					<li><img src="images/cool_thumb.gif" title="[酷]"></li>
					<li><img src="images/hsa_thumb.gif" title="[花心]"></li>
					<li><img src="images/hatea_thumb.gif" title="[哼]"></li>
					<li><img src="images/gza_thumb.gif" title="[鼓掌]"></li>
					<li><img src="images/dizzya_thumb.gif" title="[晕]"></li>
					<li><img src="images/bs_thumb.gif" title="[悲伤]"></li>
				</ul>
			</div>
			<!--face end-->
		</div>
	</div>
	<!--qq end-->
	<!--msgCon begin-->
	<div class="msgCon"></div>

	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript">
		//从缓存中获取数据并渲染
		let msgBoxList = JSON.parse(window.localStorage.getItem('msgBoxList')) || [];
		innerHTMl(msgBoxList)

		//点击小图片，显示表情
		$(".bq").click(function (e) {
			e.stopPropagation(); //阻止冒泡事件
			$(".face").slideToggle(); // 如果展开则关闭，未展开则慢慢向下展开
		});

		//在桌面任意地方点击，关闭表情框
		$(document).click(function () {
			$(".face").slideUp(); //慢慢向上收
		});

		//点击小图标时，添加功能
		$(".face ul li").click(function () {
			let simg = $(this).find("img").clone();
			$(".message").append(simg); //将表情添加到输入框
		});

		//点击发表按扭，发表内容
		$("span.submit").click(function () {
			let txt = $(".message").html(); //获取输入框内容
			if (!txt) {
				$('.message').focus(); //自动获取焦点
				return;
			}
			let obj = {
				msg: txt
			}
			msgBoxList.unshift(obj) //添加到数组里
			window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
			innerHTMl([obj]) //渲染当前输入框内容
			$('.message').html('') // 清空输入框

		});

		//删除当前数据
		$("body").on('click', '.del', function () {
			let index = $(this).parent().parent().index();
			msgBoxList.splice(index, 1)
			window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
			$(this).parent().parent().remove()
		})

		//渲染html
		function innerHTMl(List) {
			List = List || []
			List.forEach(item => {
				let str =
					`<div class='msgBox'>
						<div class="headUrl">
							<img src='images/tx.jpg' width='50' height='50'/>
							<div>
								<span class="title">杰·福尔摩斯</span>
								<span class="time">2020-07-29</span>
							</div>
							<a class="del">删除</a>
						</div>
						<div class='msgTxt'>
							${item.msg}
						</div>
					</div>`
				$(".msgCon").prepend(str);
			})
		}
	</script>


</body>

</html>